<!--
 * @Description: 加入购物车功能条，详情见ui《丝巾详情》
 * @Author: acexu 578599619@qq.com
 * @Date: 2024-11-02 20:43:37
 * @LastEditors: acexu 578599619@qq.com
 * @LastEditTime: 2024-11-14 13:35:28
 * @FilePath: /xp-platform-mobile/sheep/components/f-add-to-cartBar/f-add-to-cartBar.vue
 * @demoPic: 
-->
<template>
	<view class="add-to-cart">
		<view class="options">
			<view
				class="item"
				v-for="(item, index) in options"
				:key="item"
				@click="
					(e) => {
						handleClick(item);
					}
				"
			>
				<image
					:src="item.activeIcon ? (collected ? item.activeIcon : item.icon) : item.icon"
					mode=""
					style="width: 40rpx; height: 40rpx"
				/>
				<view class="text">{{ item.text }}</view>
			</view>
		</view>
		<view class="button-group">
			<b-button
				type="primary"
				@click="openDialog"
				style="
					width: 452rpx;
					height: 80rpx;
					border-radius: 50rpx;
					font-weight: 500;
					font-size: 32rpx;
				"
				>{{ buttonText }}</b-button
			>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, watch, defineEmits, toRefs, computed } from 'vue';
	const emit = defineEmits();
	const props = defineProps({
		buttonText: {
			type: String,
			default: '加入购物袋',
		},
		inCart: {
			type: Boolean,
			default: false,
		},
		collected: {
			type: Boolean,
			default: () => false,
		},
	});

	// const collected2 = computed(() => props.collected);
	const options = [
		{
			icon: './../../../static/common/collection.png',
			activeIcon: './../../static/common/collected.png',
			text: '收藏',
		},
		{
			icon: './../../../static/common/share.png',
			text: '分享',
		},
	];
	const openDialog = () => {
		emit('openDialog');
	};
	const handleClick = (e) => {
		switch (e.text) {
			case '收藏':
				// 收藏1，不收藏0
				let tag = props.collected ? 0 : 1;
				emit('cellectionClick', tag);
				break;
			case '分享':
				emit('shareClick');
				break;
		}
	};
</script>

<style lang="scss" scoped>
	.add-to-cart {
		height: 110rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;

		.options {
			display: flex;
			justify-content: center;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				width: 50rpx;
				margin: 0 25rpx;

				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #111111;
				}
			}
		}
	}
</style>
